<template>
  <view class="container">
    <!-- 控制按钮 -->
    <view class="control-panel">
      <button class="open-btn" @click="showSlotMachine = true">打开老虎机</button>
      <view class="settings">
        <text>选择轨道数:</text>
        <picker @change="onTrackChange" :value="trackCountIndex" :range="trackOptions">
          <view class="picker-view">{{ trackOptions[trackCountIndex] }}</view>
        </picker>
      </view>
    </view>

    <!-- 老虎机弹窗 -->
    <view class="slot-mask" v-if="showSlotMachine" @click="closeSlot">
      <view class="slot-dialog" @click.stop>
        <view class="dialog-header">
          <text class="title">老虎机抽奖</text>
          <text class="remaining-count" v-if="remainingPlays > 0">
            剩余次数: {{ remainingPlays }}
          </text>
          <text class="remaining-count text-warning" v-else>
            次数已用完
          </text>
          <button class="close-btn" @click="closeSlot">×</button>
        </view>
        
        <!-- 老虎机内容区 -->
        <view :class="animateGo ? 'open-slot an' : 'open-slot'">
          <!-- 多个轨道同时滚动 -->
          <view class="open-slot-list-phone overflow-hidden" 
                v-for="(item, index) in openBoxNumberData" :key="index">
            <!-- 垂直中奖线 -->
            <view class="winning-line-vertical"></view>
            
            <view class="an-item d-flex" style="height: 100%;">
              <view class="text-center" 
                    v-for="(t, i) in item.solt_List" :key="i"
                    style="padding: 0 5px; position: relative; border-left: 1px solid #000;"
                    :class="'ggbg' + t.level || 'ggbgs' + t.skins.lv">
                <view class="font-weight-bold" 
                      style="top: 5px; left: 25%; font-size: 12px; position: absolute; color: #ffd800;">
                </view>
                <view
                      style="width: 30px; height: 30px; z-index: 2; left: 25%; top: 25%;font-size: 14rpx;">{{t.skins.name}}</view>
                <image :src="t.skins.cover" mode="widthFix" 
                       style="width: 64px; height: 60px;"></image>
                <view style="font-size: 12px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                  {{ t.skins.name }}
                </view>
              </view>
            </view>
            <image src="https://picsum.photos/id/237/400/200" 
                   mode="widthFix"
                   style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1;"></image>
          </view>
        </view>

        <!-- 中奖结果展示区 -->
        <view class="result-area" v-if="showResult">
          <view class="result-title">中奖结果</view>
          <view class="result-items">
            <view class="result-item" v-for="(prize, index) in winningPrizes" :key="index">
              <image :src="prize.skins.cover" mode="widthFix" style="width: 40px; height: 40px;"></image>
              <view class="result-info">
                <view class="result-name">{{ prize.skins.name }}</view>
                <view class="result-value">价值: {{ prize.skins.bean }} 豆</view>
              </view>
            </view>
          </view>
          <view class="total-reward">
            总价值: {{ totalReward }} 豆
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-btns">
          <button class="btn start-btn" 
                  @click="startAnimation" 
                  :disabled="isAnimating || remainingPlays <= 0">
            {{ isAnimating ? '动画进行中' : remainingPlays <= 0 ? '次数已用完' : '开始抽奖' }}
          </button>
          <button class="btn reset-btn" 
                  @click="resetAll" 
                  :disabled="isAnimating">
            重置
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showSlotMachine: false,
      animateGo: false,
      isAnimating: false,
      trackCountIndex: 0, // 默认选择1个轨道
      trackOptions: ['1个轨道', '2个轨道', '3个轨道', '4个轨道', '5个轨道'],
      openBoxNumberData: [], // 老虎机轨道数据
      remainingPlays: 5, // 剩余抽奖次数，最多5次
      showResult: false, // 是否显示中奖结果
      winningPrizes: [], // 中奖物品列表
      totalReward: 0 // 总奖励值
    };
  },
  watch: {
    // 当轨道数变化时重新初始化数据
    trackCountIndex(newVal) {
      this.initSlotData(parseInt(newVal) + 1);
    }
  },
  onLoad() {
    this.initSlotData(1); // 默认1个轨道
  },
  methods: {
    // 初始化老虎机数据
    initSlotData(trackCount) {
      // 武器数据 - 使用网络图片
      const mockSkins = [
        {
          id: 1,
          name: "AK-47 野兽",
          cover: "https://picsum.photos/id/20/200/200",
          lv: 3,
          bean: 1200
        },
        {
          id: 2,
          name: "M4A1 极光",
          cover: "https://picsum.photos/id/21/200/200",
          lv: 2,
          bean: 800
        },
        {
          id: 3,
          name: "AWP 龙狙",
          cover: "https://picsum.photos/id/22/200/200",
          lv: 5,
          bean: 5000
        },
        {
          id: 4,
          name: "沙漠之鹰 皇室",
          cover: "https://picsum.photos/id/23/200/200",
          lv: 4,
          bean: 2500
        },
        {
          id: 5,
          name: "USP 消音版",
          cover: "https://picsum.photos/id/24/200/200",
          lv: 1,
          bean: 300
        }
      ];

      // 生成多个轨道数据
      this.openBoxNumberData = [];
      for (let track = 0; track < trackCount; track++) {
        // 为每个轨道生成随机数据
        const slotData = [];
        for (let i = 0; i < 70; i++) {
          const randomSkin = mockSkins[Math.floor(Math.random() * mockSkins.length)];
          slotData.push({
            skins: randomSkin,
            level: randomSkin.lv
          });
        }
        
        // 随机选择一个中奖物品放在中间位置
        const randomWinner = Math.floor(Math.random() * mockSkins.length);
        const winningItem = {
          skins: mockSkins[randomWinner],
          level: mockSkins[randomWinner].lv
        };
        slotData.splice(50, 0, winningItem);
        
        this.openBoxNumberData.push({ 
          solt_List: slotData,
          winningItem: winningItem // 存储中奖物品，方便后续展示
        });
      }
    },

    // 开始动画
    startAnimation() {
      if (this.isAnimating || this.remainingPlays <= 0) return;
      
      this.isAnimating = true;
      this.animateGo = true;
      this.showResult = false; // 隐藏上一次结果
      
      // 动画时长6.5秒
      setTimeout(() => {
        this.animateGo = false;
        this.isAnimating = false;
        this.remainingPlays--; // 减少一次抽奖次数
        
        // 收集中奖结果
        this.collectWinningResults();
        
        // 显示中奖结果
        this.showResult = true;
      }, 6500);
    },

    // 收集中奖结果
    collectWinningResults() {
      this.winningPrizes = [];
      this.totalReward = 0;
      
      // 从每个轨道获取中奖物品
      this.openBoxNumberData.forEach(track => {
        this.winningPrizes.push(track.winningItem);
        this.totalReward += track.winningItem.skins.bean;
      });
	  console.log(this.totalReward,"000")
	  console.log(this.winningPrizes)
    },

    // 重置动画
    resetAnimation() {
      this.animateGo = false;
      // 重新初始化数据但不重置次数
      this.initSlotData(parseInt(this.trackCountIndex) + 1);
      this.showResult = false;
    },

    // 完全重置（包括次数）
    resetAll() {
      this.resetAnimation();
      this.remainingPlays = 5; // 重置为5次
    },

    // 关闭老虎机
    closeSlot() {
      this.showSlotMachine = false;
      this.animateGo = false;
      this.isAnimating = false;
      this.showResult = false;
    },

    // 轨道数量变化
    onTrackChange(e) {
      this.trackCountIndex = e.detail.value;
      this.showResult = false; // 轨道变化时隐藏结果
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #121212;
  min-height: 100vh;
}

.control-panel {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  align-items: center;
  margin-top: 50rpx;
}

.open-btn {
  padding: 20rpx 40rpx;
  background-color: #42b983;
  color: white;
  border-radius: 10rpx;
  border: none;
  font-size: 32rpx;
}

.settings {
  display: flex;
  align-items: center;
  color: white;
  font-size: 28rpx;
  gap: 20rpx;
}

.picker-view {
  background-color: #333;
  color: white;
  padding: 15rpx 30rpx;
  border-radius: 8rpx;
}

/* 遮罩层 */
.slot-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* 弹窗容器 */
.slot-dialog {
  width: 90%;
  max-width: 600rpx;
  background-color: #1a1a1a;
  border-radius: 16rpx;
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #2c2c2c;
}

.title {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.remaining-count {
  color: #4cd964;
  font-size: 24rpx;
  margin-right: 10rpx;
}

.text-warning {
  color: #ff9500;
}

.close-btn {
  color: white;
  background-color: transparent;
  border: none;
  font-size: 40rpx;
  padding: 0 20rpx;
}

/* 老虎机样式 */
.open-slot {
  padding: 20rpx;
  box-sizing: border-box;
  flex: 1;
  overflow-y: auto;
}

.open-slot-list-phone {
  height: 180rpx;
  position: relative;
  overflow: hidden;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
}

/* 垂直中奖线样式 - 这是主要修改部分 */
.winning-line-vertical {
  position: absolute;
  width: 4rpx;
  height: 100%;
  background-color: #ff3b30;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 0 10rpx 2rpx rgba(255, 59, 48, 0.8);
}

.an-item {
  display: flex;
  height: 100%;
  will-change: transform; /* 优化动画性能 */
}

/* 多轨道动画效果 - 调整位置确保停在竖线处 */
.an .open-slot-list-phone:nth-child(1) .an-item {
  transition: all 6.5s cubic-bezier(0, 0, 0.5, 1.01) 0s;
  transform: translateX(-3730px);
}

.an .open-slot-list-phone:nth-child(2) .an-item {
  transition: all 6.5s cubic-bezier(0, 0, 0.4, 1.01) 0s;
  transform: translateX(-3720px);
}

.an .open-slot-list-phone:nth-child(3) .an-item {
  transition: all 6.5s cubic-bezier(0, 0, 0.1, 1.01) 0s;
  transform: translateX(-3730px);
}

.an .open-slot-list-phone:nth-child(4) .an-item {
  transition: all 6.5s cubic-bezier(0, 0, 0.2, 1) 0s;
  transform: translateX(-3710px);
}

.an .open-slot-list-phone:nth-child(5) .an-item {
  transition: all 6.5s cubic-bezier(0, 0, 0.5, 1.01) 0s;
  transform: translateX(-3730px);
}

/* 中奖结果区域 */
.result-area {
  background-color: #2c2c2c;
  border-radius: 8rpx;
  padding: 20rpx;
  margin: 0 20rpx 20rpx;
  animation: fadeIn 0.5s;
}

.result-title {
  color: #ffd800;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  text-align: center;
}

.result-items {
  max-height: 200rpx;
  overflow-y: auto;
  margin-bottom: 15rpx;
}

.result-item {
  display: flex;
  align-items: center;
  padding: 10rpx;
  border-bottom: 1px solid #333;
}

.result-info {
  margin-left: 15rpx;
}

.result-name {
  color: white;
  font-size: 26rpx;
}

.result-value {
  color: #4cd964;
  font-size: 22rpx;
}

.total-reward {
  color: #ffd800;
  font-size: 28rpx;
  font-weight: bold;
  text-align: right;
  padding-top: 10rpx;
  border-top: 1px dashed #444;
}

/* 操作按钮 */
.action-btns {
  display: flex;
  padding: 20rpx;
  gap: 20rpx;
}

.btn {
  flex: 1;
  padding: 20rpx 0;
  border-radius: 8rpx;
  border: none;
  font-size: 28rpx;
}

.start-btn {
  background-color: #42b983;
  color: white;
}

.start-btn:disabled {
  background-color: #666;
  color: #ccc;
}

.reset-btn {
  background-color: #ff9800;
  color: white;
}

.reset-btn:disabled {
  background-color: #888;
  color: #ccc;
}

/* 物品等级样式 */
.ggbg1 {
  background-color: #9e9e9e;
}
.ggbg2 {
  background-color: #4caf50;
}
.ggbg3 {
  background-color: #2196f3;
}
.ggbg4 {
  background-color: #9c27b0;
}
.ggbg5 {
  background-color: #ff9800;
}

.bglogo-e {
  background-image: url('https://picsum.photos/id/25/100/100');
  background-size: contain;
  background-repeat: no-repeat;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10rpx); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
